<template>
	<section class="bgwhite">
		<div>
			<mt-header fixed :title="this.gold?'行情(模拟交易)':'行情(实盘交易)'">
                <router-link slot="right" class="fontc1 mr10 fs14" to="/select">
                    <span>编缉</span>
                </router-link>
			</mt-header>
			<ul class="nav mt40">
				<li
					class="tc"
					@click="toogleClass(item, i)"
					:key="i"
					v-for="(item, i) in varietyClass"
				>
					<span class="fs15 lh40" :class="{active:cur === i}">{{item}}</span>
				</li>
                <li class="tc" @click="toogleClass('我的自选', varietyClass.length)">
                    <span class="fs15 lh40" :class="{active:cur===varietyClass.length}">我的自选</span>
                </li>
			</ul>
            <div class="fontc3 flex pl20 pr20 lh40 fs12">
                <span class="flex2 tl">全部</span>
                <span class="flex1 tl">最新价</span>
                <span class="flex1 tl">涨跌</span>
                <span class="flex1 tr">涨跌幅度</span>
            </div>
            <Swiper :options="swiperOption" ref="quoteSwiper">
                <SwiperSlide v-for="(list, i) in allTypeVarietyWidthSelect" :key="i">
                    <div>
                        <div class="list lh50 pb50">
                            <Future
                                v-for="(item,idx) in list"
                                :key="idx"
                                :future="item"
                            />
                        </div>
                        <div v-if="cur==varietyClass.length">
                            <router-link to="/select">
                                <p class="red fs14 tc lh30">+ 添加自选产品</p>
                            </router-link>
                        </div>
                    </div>
                </SwiperSlide>
            </Swiper>
			<Nav></Nav>
		</div>
	</section>
</template>
<script>
import Nav from '@/pages/Nav'
import Future from './subPage/Future.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import { quotaQuotaGetAllNewlyQuotaData } from '@api/quota.js'
import { orderVarietyGetTypeVariety } from '@api/order.js'
export default {
	name: 'Quota',
	components: {
		Nav,
        Future,
        Swiper: swiper,
        SwiperSlide: swiperSlide,
	},
	data() {
        const _that = this
		return {
			active: '',
			loading: false,
			select: [],
            varietys: [],
            cur: +this.$route.query.key || 0,
            swiperOption: {
                on: {
                    slideChangeTransitionStart (i) {
                        _that.cur = this.activeIndex
                    }
                }
            }
		}
	},
	mounted() {
		let select = storage.getItem('select')
		if (select) {
			this.select = JSON.parse(select)
		} else {
			this.select = [
                {varietyType: 'CL'},
                {varietyType: 'HSI'},
                {varietyType: 'NQ'},
                {varietyType: 'DAX'},
                {varietyType: 'IH'},
                {varietyType: 'IF'},
            ];
            localStorage.setItem('select',JSON.stringify(this.select));
		}
        this.getTypeVariety()
        this.swiper.slideTo(this.cur)

	},
	beforeDestroy() {
		clearInterval(this.timer)
	},

	computed: {
        swiper() {
            return this.$refs.quoteSwiper.swiper
        },
        ...mapState(['gold', 'varietyClass','allTypeVariety' ]),
        allTypeVarietyWidthSelect () {
            return Object.assign(this.allTypeVariety,{
                3: this.select
            })
        }
	},
	methods: {
		...mapMutations(['setCurVariety']),
		toogleClass(item, i) {
            this.swiper.slideTo(i)
            this.cur = i
		},
		getTypeVariety () {
            this.$store.dispatch('getVariety').then((res) => {
                let myselect = []
                res.forEach((item, index) => {
                    this.select.forEach((se, i) => {
                        if (se.varietyType === item.varietyType) {
                            myselect.push(item)
                        }
                    })
                })
                this.select = myselect
                clearTimeout(this.timer)
                if (this && this._isDestroyed) return
                this.timer = setTimeout(() => {
                    this.getTypeVariety()
                }, 2000)
            })
        },
	}
}
</script>
<style scoped lang='scss'>
.subbar section {
	display: flex;
	justify-content: space-between;
}

.subbar section span {
	width: 25%;
}

.nav {
	display: flex;
    justify-content: space-between;
}
.nav li:first-child {
	margin-left: rem(20px);
}

.nav li:last-child {
	margin-right: rem(20px);
}

.nav span {
	display: inline-block;
	color: #222;
}

.nav .active {
	border-bottom: rem(2px) solid #f3594d;
	color: #f3594d;
}

</style>